<template>
    <view style="overflow-y: hidden;">
        <HeaderBar :title="title"/>
        <view class="bg_img_view">
            <view class="bg_img_top">
                <!-- <span class="iconfont icon-jiahao"></span> -->
                <img src="/src/icon/add.png" class="icon" alt="">
                <span>自定义背景</span>
            </view>
            <Checkimg :list="bg_img"/>
        </view>
    </view>
</template>
<script setup>
import HeaderBar from '@/components/HeaderBar'
import Checkimg from './components/Checkimg.vue';
import { ref,reactive } from 'vue';
const bg_img = reactive([
    {
        img:"/static/bg_img/tu1.webp",
        state:false
    },
    {
        img:"/static/bg_img/tu2.webp",
        state:false
    },
    {
        img:"/static/bg_img/tu3.webp",
        state:false
    },
    {
        img:"/static/bg_img/tu4.webp",
        state:false
    }
])
const title = ref("心灵塔塔")
</script>
<style  scoped>
.bg_img_view{
    width: 100%;
    height: 94vh;
    background-color: #1c1526;
    padding: 5vw;
    box-sizing: border-box;
    margin-top: 6vh;
}
.bg_img_top{
    width: 40vw;
    height: 5vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #532269;
    color: white;
    border-radius: 2vw;
}
.icon-jiahao{
    font-size: 6vw;
    font-weight: bold;
}
.icon{
    width: 5vw;
    height: 5vw;
}
</style>